<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">
</head>

<body>
    <div id="app">
       
        <ul>
            <li v-for="(f,index) in remove">{{index+1}}-{{f.name}}-{{f.price}}</li>
        </ul>
        <ul>
            <li v-for="(u,key,index) in user">{{index}}-{{key}}-{{u}}</li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                age: 18,
                remove: [
                    { name: '下水道英雄瑞雯', price: 200000 },
                    { name: '断剑重铸之日', price: 20000 },
                    { name: '其势归来之时', price: 100000 },
                    { name: '折翼之舞', price: 400000 },
                    { name: '符文之刃', price: 300000 }
                ],
                user: {
                    username: 'aaaa',
                    password: '123456',
                    telphone: '12345678912'
                }
            },
            computed: {
                newMsg: function () {
                    return this.msg + "哈哈哈哈哈哈哈哈哈哈哈"
                },
                bgcolorCls: function () {
                    return this.hasColor ? 'bgcolor' : ''
                },
                clsProp: function () {
                    return {
                        bgcolor: this.hasColor,
                        forecolor: this.hasNum
                    }
                },
                removeSort: function () {
                    return this.remove.sort(function (a, b) {
                        return a.price - b.price;
                    })
                }
            },
            filters: {
                formatString: function (val) {
                    return val + "向胃猛冲！";
                }
            },
            methods: {
                handleClick: function () {
                    console.log('你点击了按钮，这里显示了一些东西');
                },
                otherMsg: function () {
                    return this.msg + "2222333333333"
                }
            },
            mounted: function () {
                console.log('她走了' + new Date().toLocaleString());
            },
            created: function () {
                console.log('她来了' + new Date().toTimeString());
            }
        })
    </script>
</body>

</html>